<template>
    <el-dialog
        title="新建权限"
        :visible.sync="show"
        :before-close="handleCancel"
        :close-on-click-modal="false"
        width="700px"
    >
        <div v-if="reset" v-loading="loadingGet">
            <el-breadcrumb
                style="margin-left:40px;margin-bottom:30px;"
                v-if="mdl"
                separator-class="el-icon-arrow-right"
            >
                <el-breadcrumb-item v-for="(item, index) in mdl.appList" :key="index">
                    <el-tag :effect="item.type === 1?'dark':'plain'" size="small">
                        <strong v-if="item.type === 1">{{item.name}}</strong>
                        <template v-else>{{item.name}}</template>
                    </el-tag>
                </el-breadcrumb-item>
            </el-breadcrumb>
            <el-form :model="formData" :rules="rules" ref="form">
                <el-form-item label="权限类型：" prop="type" label-width="100px">
                    <el-radio-group v-model="formData.type" size="small">
                        <el-radio-button :label="2">菜单</el-radio-button>
                        <el-radio-button :label="3">元素</el-radio-button>
                    </el-radio-group>
                    <el-checkbox style="margin-left:50px;" v-model="formData.authentication">需要认证</el-checkbox>
                    <el-checkbox v-model="formData.authorization">需要授权</el-checkbox>
                </el-form-item>
                <el-form-item label="名称：" prop="name" label-width="100px">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="编码：" prop="code" label-width="100px">
                    <el-input v-model="formData.code"></el-input>
                </el-form-item>
                <el-form-item v-if="formData.type == 2" label="路由：" prop="route" label-width="100px">
                    <el-input v-model="formData.route"></el-input>
                </el-form-item>
                <el-form-item
                    v-for="(item, index) in formData.urls"
                    :label="index===0?'HTTP请求：':''"
                    :key="index"
                    label-width="100px"
                >
                    <el-input v-model="item.value" style="width: calc(100% - 50px);"></el-input>
                    <el-button
                        v-if="index > 0"
                        style="margin-left:10px;"
                        size="small"
                        icon="el-icon-delete"
                        circle
                        @click.prevent="removeUrl(item)"
                    ></el-button>
                </el-form-item>
                <el-form-item label label-width="100px">
                    <el-button @click="addUrl" size="small">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel" size="small">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="small" :loading="loadingSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import sys_resource_api from '../../api/sys_resource_api'

export default {
    props: {
        show: Boolean,
        success: Function,
        cancel: Function,
        mdl: Object,
    },
    created() {
    },
    watch: {
        show(val) {
            if (val) {
                this.reset = false
                this.$nextTick(() => {
                    Object.assign(this.$data, this.$options.data.call(this))
                    this.reset = true
                    this.init && this.init()
                })
            }
        }
    },
    data() {
        return {
            reset: true,
            loadingGet: false,
            loadingSubmit: false,
            formData: {
                type: 2,
                urls: [{ value: '' }],
                authentication: true,
                authorization: true,
                parentId: null,
            },
            rules: {
                code: [
                    { required: true, message: '请输入编码', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loadingSubmit = true
                    sys_resource_api.add({
                        ...this.formData,
                        authentication: this.formData.authentication ? 1 : 2,
                        authorization: this.formData.authorization ? 1 : 2,
                        parentId: this.mdl.appList[this.mdl.appList.length-1].id,
                        url: this.formData.urls.filter(e => e && e != '').map(e => e.value).join(';'),
                        urls: null
                    }).then(data => {
                        this.loadingSubmit = false
                        this.$message.success('保存成功!')
                        this.success(data)
                    }).catch(err => {
                        this.loadingSubmit = false
                        this.$message.error(err.message)
                    })
                }
            })
        },
        handleCancel() {
            this.cancel()
        },
        removeUrl(item) {
            var index = this.formData.urls.indexOf(item)
            if (index !== -1) {
                this.formData.urls.splice(index, 1)
            }
        },
        addUrl() {
            this.formData.urls.push({
                value: '',
            })
        }
    }
}
</script>

<style scoped>
</style>
